<template>
  <div class="headerbox">
    <div class="header">
      <div class="headerL">
        <a onclick="javascript:history.back(-1)" class="goback"><img src="/images/goback.png" /></a>
      </div>
      <div class="headerC">
        <p>优惠券详情</p>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="h50"></div>
  <div class="coupon_detail" v-for="item in couponInfo">
    <div class="coupon_info" v-if="item.rstatus==2">
      <div class="left">
        <div class="left_top">
          <div>
            ￥<span>{{ item.valueDesc }}</span>{{item.unitDesc}}
          </div>
          <div class="top_info">
            <div>{{ item.name }}</div>
            <div>COUPON</div>
          </div>
        </div>
        <div class="left_tips">订单{{item.condition}}</div>
      </div>
      <div class="receive">
        <!-- <button class="receive_btn">已领取</button> -->
        <button class="right_btn" style="line-height: 24px !important;" @click="receiveCoupon(item.id)">立即领取</button>
      </div>
    </div>
    <div class="coupon_info" v-if="item.rstatus==1">
      <div class="left">
        <div class="left_top">
          <div>
            <span>{{ item.valueDesc }}</span>{{item.unitDesc}}
          </div>
          <div class="top_info">
            <div>{{ item.name }}</div>
            <div>COUPON</div>
          </div>
        </div>
        <div class="left_tips">订单{{item.condition}}</div>
      </div>
      <div class="receive">
        <!-- <button class="receive_btn">已领取</button> -->
        <button class="right_btn" style="line-height: 24px !important;" @click="receiveCoupon(item.id)">立即领取</button>
      </div>
    </div>
    <div class="coupon_prompt">
      <div class="prompt_title">温馨提示：</div>
      <div><span>•</span>每人限领1张</div>
      <div><span>•</span>仅限量<span>{{ item.nums }}张，</span>赶快领取！</div>
      <div><span>•</span>领取后{{sartDate}}至{{endDate}}有效</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch,reactive } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';
import { showConfirmDialog, showToast } from 'vant';
import { POST } from '../services/request.js'
import { useRouter,useRoute } from "vue-router";
import { formatDate } from '../utils/date.js'

const route = useRoute();
const id = ref(null)
const userData = reactive(JSON.parse(localStorage.getItem('LoginUser')))
const couponInfo = ref([])
id.value = route.query.id
// console.log(id,'99999');
const sartDate = ref('')
const endDate = ref('')
// console.log(sartDate.value);

onMounted(async()=>{
  await singleCoupon()
})
// 获取优惠卷详情
const singleCoupon = async()=>{
  const singleCRes = await POST({
    url:'/Coupon/getSingleCoupon',
    params:{
      id:id.value,
      uid:userData.id,
      mobile:userData.mobile
    }
  })
  if(singleCRes.code ===1){
    couponInfo.value =singleCRes.data
    // console.log(...couponInfo.value);
    const coupon = [...couponInfo.value]
    // console.log(coupon[0]);
    sartDate.value = formatDate(coupon[0].startAt)
    endDate.value = formatDate(coupon[0].endAt)
  }
} 


// 点击后领取
const receiveCoupon = async(id)=>{
  // console.log(id);
  const receiveCRes = await POST({
    url:'/Coupon/receiveCoupon',
    params:{
      id:id,
      uid:userData.id,
      mobile:userData.mobile,
    }
  })
  if(receiveCRes.code===1){
    showToast(receiveCRes.msg)
  }else{
    showToast(receiveCRes.msg)
  }
}





</script>